import * as echarts from '../ec-canvas/echarts'

Component({
  properties: {
    chartId: {
      type: String,
      value: 'chart-group-line'
    },
    canvasId: {
      type: String,
      value: 'canvas-group-line'
    },
    chartData: {
      type: Object,
      value: () => ({})
    },
    bgColor:{
      type: String,
      value: ''
    }
  },
  data: {
    ec: {
      lazyLoad: true,
    },
    opts:null
  },
  lifetimes: {
    attached() {
      console.log("11211213")
      this.chartComp = this.selectComponent(`#${this.properties.chartId}`)
      console.log("this.chartComp>>>", this.chartComp)
      if(this.data.opts){
        this.initChart(this.data.opts)
      }
    }
  },

  methods: {
    initChart(options) {
      console.log("options>>>", options, this.chartComp)
      this.chartComp && this.chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        })
        chart.setOption(options)
        this.chart = chart
        return chart
      })
    }
  },

  observers: {
    'chartData': function (valInfo) {
      console.log("valInfo>>>", valInfo)
      if(!valInfo){
        return
      }

      let { xDataList, yDataList, yAxisName, min, max } = valInfo

      const opts = {
        backgroundColor: this.properties.bgColor,
        // 悬浮框
        color: ["#00EF73", "#EF00BF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#5B8FF9",
              // backgroundColor: "#fff",
            },
          },
        },
        // 网格位置
        grid: {
          left: "30rpx",
          right: "40rpx",
          bottom: "20rpx",
          top: "37rpx",
          containLabel: true,
        },
        // legend: {
        //   data: ["需求电压", "充电电压"],
        //   right: "10",
        //   top: "0",
        //   textStyle: {
        //     color: "#808080",
        //     fontSize: "18",
        //   },
        //   itemWidth: 15,
        //   itemHeight: 6,
        //   itemGap: 25,
        // },
        dataZoom: [
          {
            type: "inside", // 详细配置可见echarts官网
            xAxisIndex: [0],
            start: 0,
            end: 100,
            filterMode: "none", // 缩放时数据不过滤
          },
        ],
        // x轴
        xAxis: {
          // name: "时间",
          boundaryGap: false,
          axisLine: {
            symbol: ["none", "arrow"],
            symbolSize: [8, 8],
            symbolOffset: [0, 7],
            lineStyle: {
              color: "#333",
              type: "solid",
              width: 0.6,
            },
          },
          type: "category",
          data: xDataList,
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#808080',  //更改坐标轴文字颜色
              fontSize : 11
            },
            formatter: function (value) {
              // 在这里写你需要的时间格式
              let time = value.slice(11, 19) + "\n" + value.slice(0, 10);
              return time;
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: yAxisName,
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            symbolSize: [8, 8],
            symbolOffset: [0, 7],
            lineStyle: {
              color: "#808080",
              type: "solid",
              width: 0.6,
            },
          },
          type: "value",
          scale: true,
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#808080',  //更改坐标轴文字颜色
              fontSize : 11
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#333",
              type: "solid",
              width: 0.6,
            },
          },
        },

        series: [],
      }

      let legendName = []
      if(yDataList && yDataList.length){
        yDataList.forEach(item => {
          legendName.push(item.name)
          opts.series.push({
              name: item.name,
              type: "line",
              symbolSize: 8,
              smooth: true,
              symbol: "none",
              borderWidth: 2,
              data: item.data,
          })
        })
      }

      if(legendName.length > 1){
        opts.legend= {
          data: legendName,
          right: "10",
          top: "0",
          textStyle: {
            color: "#808080",
            fontSize: "12",
          },
          itemWidth: 15,
          itemHeight: 6,
          itemGap: 25,
        }
      }
    
      if(min){
        opts.yAxis.min = min
      }

      if(max){
        opts.yAxis.max = max
      }

      console.log("this.opts/this.chart>>>", opts, this.chart)
      if(xDataList){
        this.setData({
          opts
        })
      }

      if (this.chart) {
        this.chart.setOption(opts)
      } else {
        this.initChart(opts)
      }
    }
  }
})
